<script setup lang="ts">
import {inject, reactive, toRaw} from 'vue';
import {jobStore} from '@/store/job'
import {getJobType} from '@/api/job'
const store = jobStore()
const {closePositionType} = inject('popup') as any

const state = reactive({
  index: 0,
  key:"技术"
})
const leftBack = () => closePositionType();
const setTypeKey = (key: any, value: any) => {
  state.index = key
  state.key = value
}
//获取职位类型
const getPositionList = async () => {
  const res = await getJobType();
  store.setJobTypeList(res.data);
  setTypeKey(0, Object.keys(store.jobTypeList)[0])
}
if (store.jobTypeList) getPositionList()
</script>
<template>
  <van-nav-bar title="职位类型" left-arrow @click-left="leftBack"/>
  <div class="position-type">
    <div class="position-type-left">
      <h5 :class="state.index==index?'active':''" v-for="(value,key,index) in store.jobTypeList" :key="key"
          @click="setTypeKey(index,key)">{{ key }}</h5>
    </div>
    <div class="position-type-right">
      <span v-for="(item, index) in toRaw(store.jobTypeList as any)[state.key]"
            :key="index" @click="closePositionType(item)">{{ item.value }}</span>
    </div>
  </div>
</template>
<style scoped>
.position-type {
  display: flex;
}

.position-type-left {
  width: 4.77rem;
  height: calc(100vh - 46px);
  background: #F6F6F6;
}

.position-type-left h5 {
  width: 4.77rem;
  height: 2.4rem;
  line-height: 2.4rem;
  background: #F6F6F6;
  border-bottom: 1px solid #ffffff;
  font-size: 0.75rem;
  font-weight: 300;
  color: #333333;
  text-align: center;
}

.position-type-left h5.active {
  background: #EFEFEF;
}

.position-type-right {
  padding: 0.8rem 0 0 0.6rem;
}

.position-type-right span {
  width: 6.61rem;
  height: 2.03rem;
  line-height: 2.03rem;
  background: #FFFFFF;
  border: 1px solid #E9E9E9;
  border-radius: 0.11rem;
  font-size: 0.75rem;
  font-weight: 300;
  color: #666666;
  text-align: center;
  margin-right: 0.59rem;
  margin-bottom: 0.64rem;
  display: inline-block;
}

.position-type-right span:nth-child(2n) {
  margin-right: 0px;
}
</style>